import { defineComponent, ref, watch } from "vue";
import { getEventCount } from '@/api/statistics'
import './style.scss'

export default defineComponent({
  name: 'BigscreenEventInfo',
  props: {
    time: {
      type: Object,
      default: () => { }
    },
    code: { // 地区code
      type: String,
      default: ''
    },
    refresh: {
      type: Number,
    }
  },
  setup(props) {
    const infoData = ref({})
    const getData = async () => {
      const {endDate,startDate} = props.time
      const para = {
        areaCode: props.code,
        endDate,
        startDate
      }
      const res = await getEventCount(para);
      if (res.status === 200) {
        infoData.value = res.data
      }
    };
    watch(() => props.refresh, () => {
      getData()
    });
    watch(() => props.code, () => {
			getData()
		});

    return () =>
      <div class="panel info">
        <header class="event" />
        <main class="flow">
          <dl>
            <dt></dt>
            <dd>
              <div>上线事件总数</div>
              <h4>{infoData.value.evtNum ??= 0 }</h4>
            </dd>
          </dl>
          <dl>
            <dt></dt>
            <dd>
              <div>新增上线事件</div>
              <h4>{infoData.value.evtIncreaseNum ??= 0 }</h4>
            </dd>
          </dl>
          <dl>
            <dt></dt>
            <dd>
              <div>累计推送次数</div>
              <h4>{infoData.value.evtInvokeNum ??= 0 }</h4>
            </dd>
          </dl>
          <dl>
            <dt></dt>
            <dd>
              <div>平均推送时长</div>
              <h4>{infoData.value.evtAverageTime ??= 0 }</h4>
            </dd>
          </dl>
          <dl>
            <dt></dt>
            <dd>
              <div>事件推送成功</div>
              <h4>{infoData.value.evtInvokeSuccess ??= 0 }</h4>
            </dd>
          </dl>
          <dl>
            <dt></dt>
            <dd>
              <div>事件推送失败</div>
              <h4>{infoData.value.evtInvokeFailed ??= 0 }</h4>
            </dd>
          </dl>
        </main>
      </div>
  }
})